<template>
  <div class="message-wrapper">
    <div class="content-title-wrapper">
      <span class="title">我的消息</span>
      <span @click="readAll()" class="right-text">全部标为已读</span>
    </div>
    <van-pull-refresh v-model="isRefreshing">
    <div v-waterfall-lower="loadMoreData" waterfall-disabled="disabled" waterfall-offset="400" class="message-list">
      <van-cell-swipe v-for="(item, index) in msgData.results" :key="index" :right-width="88">
        <van-cell-group>
          <van-cell @click="markRead(index)" :value="item.pastTimeStr">
            <template slot="title">
            <span v-if="item.read" class="van-cell__text">[已读]&nbsp;&nbsp;{{ item.text }}</span>
            <span v-else class="van-cell__text"><em class="ehance-text">[未读]</em>&nbsp;&nbsp;{{ item.text }}</span>
            <span class="van-cell__label">点击查看详情</span>
            </template>
          </van-cell>
        </van-cell-group>
        <span @click="remove(index)" slot="right">删除</span>
      </van-cell-swipe>
      <blank-content v-if="!msgData.results.length" text="暂无消息"></blank-content>
    </div>
    </van-pull-refresh>
    <footer-bar page="message"></footer-bar>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'

import FooterBar from '@/components/footerBar'
import Waterfall from '@/components/vant/waterfall'

Vue.component(FooterBar.name, FooterBar)

export default {
  name: 'Message',
  data () {
    return {
      msgData: { results: [] },
      isRefreshing: false,
    }
  },
  created () {
    this.getMessageData()
  },
  watch: {
    isRefreshing() {
      if (this.isRefreshing) {
        this.refreshData()
      }
    } 
  },
  directives: {
    WaterfallLower: Waterfall('lower')
  },
  methods: {
    readAll: function() {
      var url = '/notifications/read_all/'
      var that = this
      this.axios.post(url)
      .then(function(res) {
        if (res.status >= 200 && res.status < 300) {
          that.msgData.results.forEach(function(msg) {
            msg.read = true
          })
          return that.$toast.success('全部已读')
        } else {
          return that.$toast.fail(res.msg)
        }
      })
    
    },
    remove: function(index) {
      var msg = this.msgData.results[index]
      var url = '/notifications/' + msg.id + '/delete/'
      var that = this
      this.axios.post(url)
      .then(function(res) {
        if (res.status >= 200 && res.status < 300) {
          that.msgData.results.splice(index, 1)
          return that.$toast.success('删除成功')
        } else {
          return that.$toast.fail(res.msg)
        }
      })
    },
    markRead: function(index) {
      var msg = this.msgData.results[index]
      var url = '/notifications/' + msg.id + '/mark_as_read/'
      var that = this
      this.axios.post(url)
      .then(function(res) {
        if (res.status >= 200 && res.status < 300) {
          msg.read = true
          // 跳转到相应的内容
          console.log(msg)
          if (msg.target.models == 'question') {
            var question = msg.target
            var params = { id: question.id }
            that.$router.push({ name: 'questionDetail', params: params })
          } else if (msg.target.models == 'answer') {
            var params = { id: msg.target.question }
            that.$router.push({ name: 'questionDetail', params: params })
          } else if (msg.target.models == 'user') {
            var master = msg.target
            var params = { id: master.id }
            that.$router.push({ name: 'masterDetail', params: params})
          } else if (msg.target.models == 'works') {
            var painting = msg.target
            var params = { id: painting.id }
            that.$router.push({ name: 'paintingDetail', params: params})
          } else if (msg.target.models == 'master') {
            that.$router.push('auth/master')
          } else if (msg.target.models == 'student') {
            that.$router.push('auth/student')
          } else if (msg.target.models == 'realname') {
            that.$router.push('auth/realname')
          }
        } else {
          return that.$toast.fail(res.msg)
        }
      })
    },
    refreshData() {
      var that = this
      this.msgData = { results: [] }
      
      this.getMessageData(null, function() {
        that.isRefreshing = false
      })
    },
    loadMoreData() {
      if (this.msgData.next) {
        this.getMessageData(this.msgData.next)
      }
    },
    getMessageData: function(next=null, callback=null) {
      var params = {}
      var url = '/notifications/'
      if (next) {
        url = next
      }
      this.$toast.loading()
      var that = this
      // 调用登陆接口
      this.axios.get(url, { params: params })
      .then(function (res) {
        that.$toast.clear()
        console.log(res.data)
        if (res.status === 200) {
          console.log(res.data.results)
          that.msgData.count = res.data.count
          that.msgData.next = res.data.next
          that.msgData.previous = res.data.previous
          that.msgData.results = that.msgData.results.concat(res.data.results)
        }
        if (callback) {
          return callback()
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        console.log(error)
      })
    }
  }
}

</script>

<style lang="scss">

  @import '../../assets/style/const.scss';

  .van-cell-swipe__right {
    width: 88px;
    color: #fff;
    background: #EA5A49;
    text-align: center;
    line-height: 58px;
  }

  .message-wrapper {
    margin-bottom: 3rem;
    .content-title-wrapper {
      background: #fff;
      height: 2rem;
      position: relative;
      margin-bottom: 1px;
      .title {
        font-size: .7rem;
        color: $color-text-strong;
        font-weight: bold;
        height: 1.5rem;
        line-height: 1.5rem;
        padding: .25rem;
        display: inline-block;
        margin-left: .5rem;
      }
      .right-text {
        position: absolute;
        padding: .25rem;
        right: .5rem;
        top: 0;
        height: 1.5rem;
        line-height: 1.5rem;
        color: $color-text-normal;
        font-size: .6rem;
      }
    }
  }

</style>
